<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        // const p = new Promise((resolve, reject) => {
        //     $.ajax({
        //         type: 'POST',
        //         url: 'http://nocat.life:3021/product/find',
        //         data: {
        //             pageSize: 12
        //         },
        //         success(res) {
        //             if (res.code == 200) {
        //                 // 请求成功，调用resolve方法，该方法的作用有：
        //                 // 1. 传递数据给resolve，它会将数据保存到p对象中
        //                 // 2. 将p对象的状态更改为“已成功”
        //                 resolve(res.data);
        //             } else {
        //                 // 请求失败，调用reject方法，该方法的作用有：
        //                 // 1. 传递数据给reject，它会将数据保存到p对象中
        //                 // 2. 将p对象的状态更改为“已失败”
        //                 reject();
        //             }
        //         }
        //     })
        // });


        // p.then((data) => {
        //     console.log(data);
        // }).catch(() => {
        //     console.log("请求失败");
        // })


        const p = getProductsData();
        p.then(data => {
            productsRender(data);
        })


        // 请求数据
        function getProductsData() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: 'POST',
                    url: 'http://nocat.life:3021/product/find',
                    data: {
                        pageSize: 12
                    },
                    success(res) {
                        if (res.code == 200) {
                            resolve(res.data.rows);
                        }
                    }
                })
            })
        }

        // 渲染数据
        function productsRender(productsData) {
            const productListEle = document.getElementById('productList');
            productListEle.innerHTML = productsData.map(item => {
                return (
                    `
            <div class="list-item">
                <img class="item-image" src="${item.list_image}" alt="">
                <p class="item-name">${item.name}</p>
                <strong class="item-price">￥${item.price}</strong>
            </div>
            `
                )
            }).join("")
        }




    </script>
</body>

</html>